<template>
	<div class="exchange-wrap2">
		<div class="header">
			<div class="user-juge">
			</div>
			<div class="cpn-box">
				
				<div class="title">
					请挑选您的礼券，注意有效期<br/>
					只可选一张哦
				</div>
				<div class="cpn-list">
					<div class="cpn-item" v-for="(cpn, index) in cpnList">
						<div class="title ellipsis">
							{{ cpn.activityName }}
						</div>
						<div class="price">
							<span><em>券面额：</em><em class="price-text">{{ cpn.faceValue }}</em><em class="price-danwei">元</em></span>
						</div>
						<div class="desc">
							{{ cpn.ruleDesc.split('#')[0] }}
						</div>
						<div class="store-price-xian">
							<span><em >{{ cpn.payPrice1 }}</em><em class="price-text">{{ cpn.payPrice2 }}</em><em class="price-danwei">{{ cpn.payPrice3 }}</em></span>
						</div>
						<div class="store-price-yuan">
							<span><em>{{ cpn.storePrice1 }}</em><em class="price-text">{{ cpn.storePrice2 }}{{ cpn.storePrice3 }}</em></span>
						</div>
						<div class="btn" :ca="'推荐有礼_车享家新人礼券$领取'+cpn.activityName" @click="showRegistBox(index)">领取</div>
					</div>
				</div>
				<a :href="showStoreListUrl" class="store" ca="推荐有礼_车享家新人礼券$查看附近门店">
					
				</a>
			</div>
		</div>
		
		<!--<div class="cx-gift">
			<img src="../../../assets/image/invitefriends2/share2/cx-gift.jpg" />
		</div>-->
		<div class="cx-info">
			<img src="../../../assets/image/invitefriends2/share2/cx-info.jpg" />
			<div class="tips">上海赛可电子商务有限公司在法律允许的范围内拥有对本次活动的解释权</div>
		</div>
		<div class="download">
			<div class="icon"></div>
			<div class="desc">下载车享家APP，抢免费洗车券</div>
			<a href="//cxb.chexiang.com/service/version/getLatestAppVersion/0?channel=cx_cxj_xzy_0623_ldxwx" class="btn" ca="推荐有礼_车享家新人礼券$下载车享家APP">立即打开</a>
		</div>
		
		<div class="regist-box" :class="{'slideUp': showRegistBoxStatus ===1, 'slideDown': showRegistBoxStatus === 2}" v-show="showRegistBoxStatus === 1" style="display: none;">
			<div class="close" ca="推荐有礼_车享家新人礼券$关闭"  @click="hideRegistBox()">＋</div>
			<div class="title">
				填写手机号领取礼券
			</div>
			<form class="content">
				<input type="text" id="mobile" v-model="mobile" class="mobile" placeholder="填写手机号领取礼券" maxlength="11" />
				<div class="code-box">
					<input type="text" id="code" v-model="code" class="code" placeholder="填写验证码" maxlength="6"/>
					<div class="btn-code" @click="sendSmsCode" ca="推荐有礼_车享家新人礼券$获取验证码">
						<timer-btn :second="60" :btntext="btnSmstText" ref="timerBtn"></timer-btn>
					</div>
				</div>
				<input type="button" class="btn" value="立即领取" ca="推荐有礼_车享家新人礼券$立即领取" @click="exchangeCpnAction">
			</form>
			<p class="agreement">
				<span>未注册号验证后自动创建车享账号<br/>领取表示同意</span>
				<a href="https://cxjapp.chexiang.com/html/memberAgreement.html" ca="推荐有礼_车享家新人礼券$用户协议及隐私权声明">《用户协议及隐私权声明》</a>
			</p>
		</div>
		<div class="mask" v-if="showMask" @click="hideRegistBox()"></div>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import Vue from 'vue';
	import Url from 'url';
	import QueryString from 'query-string';
	import {Toast, MessageBox} from 'mint-ui';
	import timerBtn from '../../common/timeBtn';
	export default{
		data (){
			return {
				showRegistBoxStatus: 2,
				showMask: false,
				cpnList: [],
				cpnCode:'',
				prizeCode:'',
				btnSmstText: '获取验证码',
				mobile:'',
				code:'',
				shareUid:'',
				initSignUrl:process.env.NODE_ENV == 'sit' ? common.isEnv("//recruit") : common.isEnv("//wx"),
				showMemProtolFlag: false,
				locationObj: {
					"latitude": "",
					"longitude": "",
					"cityName": ""
				},
				globalActionFlag: true, //防止重复点击 false不可点击  true可点击
				showStoreListUrl: '/store/wxStorelist.htm'
			};
		},
		components: {timerBtn},
		created (){
			var _this = this;
			/*var hrefUrl = window.location.href;
	    	var urlObj = Url.parse(hrefUrl);
	    	var queryObj = QueryString.parse(urlObj.query);
	    	//分享人uid
	    	_this.shareUid = queryObj.shareUid;*/
	    	
	    	//分享人uid QueryString 模块会把 + 变成空白符
	    	_this.shareUid = _this.getQueryString("shareUid");
	    	
	    	console.log("shareUid", _this.shareUid);
            /*var shareObj = {
              friend:{
                shareTitle:" 老带新活动标题！",
                descContent:"老带新活动描述标题",
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/service/list1.jpg?v=1",
                lineLink: hrefUrl
              },
              friendQuan:{
                shareTitle:"老带新活动标题！",
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/service/list1.jpg?v=1",
                lineLink: hrefUrl
              }
            }*/
            /*common.initWxShare(_this, this.initSignUrl, shareObj, 1);
			wx.ready(function () {
				wx.getLocation({
			      success: function (res) {
			      	Toast("获取定位成功哈哈！");
			      	var latitude = res.latitude;
			      	var longitude = re.longitude;
			      	_this.locationObj= {
						"latitude": latitude,
						"longitude": longitude					
			      	};
			       //_this.getCpnList();
			       //alert(JSON.stringify(res));  
			      },  
			      cancel: function (res) {  
			        //alert('用户拒绝授权获取地理位置');  
			      }  
			    });  
			});*/
			_this.getCpnList();
		},
		mounted (){
			var _this = this;
			//打点
    		_this.$nextTick(function () {
    			common.ANA_AnalyticsScan();
    		});
		},
		methods: {
			showRegistBox: function (index) {
				var _this = this;
				_this.cpnCode = _this.cpnList[index].activityCode;
				_this.prizeCode = _this.cpnList[index].prizeCode;
				_this.showRegistBoxStatus = 1;
				_this.showMask = true;
				localStorage.setItem('cpnDetail', JSON.stringify(_this.cpnList[index]));
			},
			hideRegistBox: function () {
				var _this = this;
				_this.showRegistBoxStatus = 2;
				_this.showMask = false;
			},
			//获取新用户券列表
			getCpnList: function () {
				var _this = this;
				var paramObj = {
					"cityName": _this.locationObj.cityName, 
					"latitude": _this.locationObj.latitude, 
					"longitude":  _this.locationObj.longitude
				};
				/*_this.$http.get(common.isdev() + "/guide/getExchangeCouponList4NewUser/0.htm", paramObj).then(function (res) {
	              	if (res.data.result == 1) {
	              		_this.cpnList = res.data.obj;
	              		//打点
			    		_this.$nextTick(function () {
			    			common.ANA_AnalyticsScan();
			    		});
	              	}
	           }, function (err) {
	      			Toast("系统繁忙，请稍后再试");
	            });*/
	           _this.cpnList = [{
					"prizeCode": "ACT_GUIDE_02_01",
					"activityCode": "60115YCXLDX",
					"activityName": "洗车抵用券",
					"faceValue": "15",
					"ruleDesc": "领取后7天内有效",
					"payPrice1": "到店只付",
					"payPrice2": "10",
					"payPrice3": "元起",
					"storePrice1": "门店价：",
					"storePrice2": "25",
					"storePrice3": "元起"
				},
				{
					"prizeCode": "ACT_GUIDE_02_02",
					"activityCode": "601198NSQJHYFL",
					"activityName": "全车内饰清洁",
					"faceValue": "198",
					"ruleDesc": "领取后90天内有效",
					"payPrice1": "到店只付",
					"payPrice2": "108",
					"payPrice3": "元",
					"storePrice1": "门店价：",
					"storePrice2": "360",
					"storePrice3": "元"
				},
				{
					"prizeCode": "ACT_GUIDE_02_03",
					"activityCode": "601100YBYLDX",
					"activityName": "保养抵用券",
					"faceValue": "100",
					"ruleDesc": "领取后90天内有效",
					"payPrice1": "到店抵扣",
					"payPrice2": "100",
					"payPrice3": "元",
					"storePrice1": "门店价：",
					"storePrice2": "421",
					"storePrice3": "元起"
				},
				{
					"prizeCode": "ACT_GUIDE_02_04",
					"activityCode": "60164YDLLDX",
					"activityName": "五座机器打蜡",
					"faceValue": "64",
					"ruleDesc": "领取后7天内有效",
					"payPrice1": "到店只付",
					"payPrice2": "38",
					"payPrice3": "元",
					"storePrice1": "门店价：",
					"storePrice2": "120",
					"storePrice3": "元"
				}];


			    //打点
	    		_this.$nextTick(function () {
	    			common.ANA_AnalyticsScan();
	    		});
			},
			testMobile: function () {
				var _this = this;
				var mobileRegx = /^1[3|4|5|7|8][0-9]{9}$/;
				var mobile = _this.mobile.trim();
		        if (mobileRegx.test(mobile)) {
		        	return true;
		        }else { 
		        	return false;
		        };
			},
			testCode: function () {
				var _this = this;
				var codeRegx = /^[0-9]{6}$/;
				var code = _this.code.trim();
		        if (codeRegx.test(code)) {
		        	return true;
		        }else { 
		        	return false;
		        };
			},
			sendSmsCode: function () {
				var _this = this;
				if (!_this.testMobile()) {
					Toast("请输入正确的手机号！");
					return ;
				}
				var paramObj =  {
	    			'mobile': _this.mobile,
	    			"userId": _this.shareUid
	    		};
				//_this.$refs.timerBtn.send();
				_this.$http.post(common.isdev() + '/guide/sendSmsCode/1.htm', paramObj).then(function (res) {
			        var someData = res.data;
			        if(someData.result == 1) {
			        	_this.$refs.timerBtn.send();
			          	Toast("验证码发送成功！");
			        } else {
			        	//Toast(res.data.msg);
			        	//_this.$refs.timerBtn.send();
			        	var errorCode = res.data.errorCode ;
						if (errorCode == 1007) {
							Toast("抱歉~你已领取过了,不能重复领取!");
						} else if (errorCode == 1013){
							Toast("呃~无法领取自己发放的礼包！");
						} else if (errorCode == 1014)  {
							Toast("抱歉~您已经是注册用户无法领取该礼包！");
						} else  {
							Toast("验证码发送失败！");
						}
			        }
			    }, function (res) {
			    	Toast("验证码发送失败！");
			    });
			},
			exchangeCpnAction: function (index) {
				
				var _this = this;
				if (!_this.testMobile()) {
					Toast("请输入正确的手机号！");
					return ;
				}
				if (!_this.testCode()) {
					Toast("请输入正确的验证码！");
					return ;
				}
				var paramObj = {
					"activityCode": _this.cpnCode,
					"prizeCode": _this.prizeCode,
					"mobile": _this.mobile.trim(),
					"captcha": _this.code.trim(),
					"userId": _this.shareUid
				};
				
				if (!_this.globalActionFlag) {
	            	return;
	            }
	            _this.globalActionFlag = false;
				_this.$http.post(common.isdev() + "/guide/exchangeCoupon4NewUser/0.htm", paramObj).then(function (res) {
					if (res.data.result == 1 ) {
						window.location.href = (common.isHtml() == "shtml" ? "/cx/cxj/cxjweb": "") + "/invitefriends2/download/invitefriends2-download."+common.isHtml();
					}else {
						var errorCode = res.data.errorCode ;
						if (errorCode == 1005) {
							Toast("账号已存在!");
						} else if (errorCode == 1006){
							Toast("验证码错误！");
						} else if (errorCode == 1011)  {
							Toast("抱歉,兑换失败！");
						} else  {
							Toast("抱歉,兑换失败！");
						}
						//Toast(res.data.msg);
					}
					_this.globalActionFlag = true;
				}, function (res) {
					_this.globalActionFlag = true;
					Toast("抱歉,兑换失败！");
				});
			},
			getQueryString: function (name) {
			    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
			    var r = window.location.search.substr(1).match(reg);
			    if (r != null) {
			        return unescape(r[2]);
			    }
			    return null;
			}
		}
	}
</script>
<style lang="scss">
	@import "../../../assets/css/reset.scss";
	@import "../../../assets/css/common.scss";
	html, body {
	height: 100%;
	}
	.exchange-wrap2 {
		position: relative;
		padding-bottom: 5.2rem;
		.header {
			padding-top: 4rem;
			padding-bottom: 1.5rem;
			background: #2079eb url(../../../assets/image/invitefriends2/share2/index-bg.jpg) center top no-repeat;
			background-size: cover;
			.user-juge {
				margin-left: 2rem;
				width: 31.1rem;
				height: 8.4rem;
				background: transparent url(../../../assets/image/invitefriends2/share2/user-juge.png) center top no-repeat;
				background-size: 31.1rem 8.1rem;
			}
			.cpn-box {
				margin: 0 2rem;	
				margin-top: 4rem;
				.title {
					line-height: 1.8rem;
					text-align: center;
					font-size:1.5rem;
					color:#ffffff;
				}
				.cpn-list {
					margin-top: 1.5rem;
					width: 100%;
					background: #106adc;
					overflow: hidden;
					padding: 0;
					padding-bottom: 1rem;
					.cpn-item {
						width: 15.3rem;
						height: 19rem;
						margin-top: 1rem;
						margin-left: 1rem;
						overflow: hidden;
						background: transparent url(../../../assets/image/invitefriends2/share2/cpn-item.png) center center no-repeat;
						background-size: contain;
						float: left;
						text-align: center;
						.title {
							padding-top: 1.8rem;
							height: 2rem;
							font-size:1.9rem;
							color:#262f34;
							font-weight: 800;
							box-sizing: content-box;
						}
						.price {
							height: 1.1rem;
							margin-top: 0.5rem;
							font-size:1.1rem;
							color:#999999;
						}
						.desc {
							margin-top: 0.4rem;
							height: 1.1rem;
							font-size:1.1rem;
							color:#999999;
						}
						.store-price-xian {
							height: 1.5rem;
							margin-top: 2.5rem;
							font-size:1.5rem;
							color:#000000;
							.price-text {
								font-size:1.9rem;
								color:#f12626
							}
							.price-danwei {
								font-size:1.5rem;
								color:#f12626
							}
						}
						.store-price-yuan {
							margin-top: 1rem;
							height: 1.1rem;
							font-size:1.1rem;
							color:#999999;
							.price-text {
								font-size:1.1rem;
								color:#999999;
								text-decoration: line-through;
							}
						}
						.btn {
							width: 8rem;
							height: 3rem;
							line-height: 3rem;
							margin: 0 auto;
							margin-top: 2rem;
							border-radius: 999px;
							background: #f12626;
							text-align: center;
							font-size:1.3rem;
							color: #ffffff;
						}
					}
					&:after {
						clear: both;
						display: block;
						content: '';
						height: 0;
						overflow: hidden;
					}
				}
				.store {
					display: block;
					margin: 0 auto;
					margin-top: 2rem;
					width: 15.4rem;
					height: 3.6rem;
					background: transparent url(../../../assets/image/invitefriends2/share2/store-more.png) center center no-repeat;
					background-size: cover;
				}
			}
		}
		.cx-gift {
			img {
				width: 100%;
			}
		}
		.cx-info {
			position: relative;
			img {
				width: 100%;
			}
			.tips {
				position: absolute;
				left: 0;
				bottom: 0.5rem;
				width: 100%;
				text-align: center;
				font-size: 1rem;
				color: #999999;
			}
		}
		.download {
			width: 100%;
			height: 5.2rem;
			background: #000000;
			position: fixed;
			left: 0;
			bottom: 0;
			.icon {
				position: absolute;
				top: 0.8rem;
				left: 1rem;
				width: 3.6rem;
				height: 3.6rem;
				background: transparent url(../../../assets/image/invitefriends2/share2/cx-icon.png) center center no-repeat;
				background-size: cover;
			}
			.desc {
				height: 5.2rem;
				line-height: 5.2rem;
				padding-left: 5.6rem;
				padding-right: 9rem;
				text-align: left;
				font-size:1.5rem;
				color:#ffffff;
			}
			.btn {
				position: absolute;
				top: 1rem;
				right: 1rem;
				width: 7.6rem;
				height: 3.2rem;
				line-height: 3.2rem;
				border-radius: 0.4rem;
				background: #0084ff;
				text-align: center;
				font-size:1.3rem;
				color:#ffffff;
			}
		}
		.regist-box {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 2;
			// transform: translate(0,100%);
			// -webkit-transform: translate(0,100%);
			display:none;
			width: 100%;
			background: #ffffff;
			.close {
				position: absolute;
			    top: 0.6rem;
    			right: 0.7rem;
				transform:rotate(-45deg);
				-webkit-transform:rotate(-45deg);
				text-align: center;
				font-size: 2.8rem;
				color: #b0b6b9;
			}
			.title {
				height: 5.6rem;
				line-height: 5.6rem;
				border-bottom: 1px solid #d2d5d7;
				padding-left: 1.4rem;
				font-size: 1.5rem;
				color: #2d2d2d;
			}
			.content {
				display: block;
				padding: 2.3rem 2rem 1.8rem 2rem;
				.mobile {
					width: 100%;
					height: 4.6rem;
					line-height: 4.6rem;
					border: 1px solid #d9d9d9;
					border-radius: 0.4rem;
					padding-left: 1.5rem;
					background:#f9fcff;
					font-size:1.6rem;
					color: #262f34;
				}
				.code-box {
					position: relative;
					margin-top: 1rem;
					.code {
						width: 100%;
						height: 4.6rem;
						line-height: 4.6rem;
						border: 1px solid #d9d9d9;
						border-radius: 0.4rem;
						padding-left: 1.5rem;
						background:#f9fcff;
						font-size:1.6rem;
						color: #262f34;
					}
					.btn-code {
						position: absolute;
						top: 0;
						right: 0;
						width: 11.9rem;
						height: 4.6rem;
						border-top-right-radius: 0.4rem;
						border-bottom-right-radius: 0.4rem;
						overflow: hidden;
						button {
							border: 0;
							display: block;
							width: 100%;
							height: 100%;
							line-height: 4.6rem;
							background:#0084ff;
							text-align: center;
							font-size: 1.6rem;
							color: #ffffff;
						}
						.codegray {
							background: #cccccc;
						}
					}
				}
				.btn {
					border: none;
					margin-top: 3rem;
					width: 100%;
					height: 4.6rem;
					border-radius: 0.4rem;
					background: #0084ff;
					font-size: 1.7rem;
					color: #ffffff;
				}
				
			}
			.agreement {
				padding-bottom: 1.8rem;
				font-size:1.1rem;
				color:#919191;
				text-align:center;
				a {
					color: #0084ff;
				}
			}
		}
		.logo {
			margin: 0 auto;
			margin-top: 3.4rem;
			width: 9.4rem;
			height: 3.6rem;
			background: transparent url(../../../assets/image/invitefriends2/share/logo-cxj.png) center center no-repeat;
			background-size: contain;
		}
		.cpn-list {
			padding: 1.3rem 1.5rem 1.7rem;
			width: 100%;
			.cpn-item {
				width: 100%;
				background: transparent url(../../../assets/image/invitefriends2/exchange/cpn-item.png) center center no-repeat;
				background-size: contain;
			}
		}
		.mask {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.7);
		}
		.slideUp{
	        animation: slideUp 400ms ease-in forwards;
	        -webkit-animation: slideUp 400ms ease-in forwards;
	        display:block;
	    }
	    @-webkit-keyframes slideUp {
	        0%{
	            transform: translateX(0) translateY(100%);
	            -webkit-transform: translateX(0) translateY(100%);
	        }
	        100%{
	            transform: translateX(0) translateY(0);
	            -webkit-transform: translateX(0) translateY(0);
	        }
	    }
	    @keyframes slideUp {
	        0%{
	            transform: translateX(0) translateY(100%);
	            -webkit-transform: translateX(0) translateY(100%);
	        }
	        100%{
	            transform: translateX(0) translateY(0);
	            -webkit-transform: translateX(0) translateY(0);
	        }
	    }
	    .slideDown{
	        animation: slideDown 400ms ease-in forwards;
	        -webkit-animation: slideDown 400ms ease-in forwards;
	        display:none;
	    }
	    @-webkit-keyframes slideDown {
	        0%{
	            transform: translateX(0) translateY(0);
	            -webkit-transform: translateX(0) translateY(0);
	        }
	        100%{
	            transform: translateX(0) translateY(100%);
	            -webkit-transform: translateX(0) translateY(100%);
	        }
	    }
	    @keyframes slideDown {
	        0%{
	            transform: translateX(0) translateY(0);
	            -webkit-transform: translateX(0) translateY(0);
	        }
	        100%{
	            transform: translateX(0) translateY(100%);
	            -webkit-transform: translateX(0) translateY(100%);
	        }
	    }
	}
	.ellipsis {
		white-space: nowrap;  
        overflow: hidden;  
        text-overflow: ellipsis;
        display: block;  
	}
	
	.ellipsis3 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.mint-toast {
		z-index: 1000 !important;
	}
	
</style>
